<template>
  <div>
    <div id="stacked" ref="stacked" style="height:350px;margin-bottom:16px;"></div>
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
  name: 'Stacked',
  props: {
    chartData: Object
  },
  data () {
    return {
      mychart: {}
    }
  },
  mounted () {
    this.initChart()
    window.addEventListener('resize', () => {
      setTimeout(() => {
        this.mychart.resize()
      }, 500)
    })
  },
  methods: {
    initChart () {
      this.mychart = echarts.init(this.$refs.stacked)
      const yearArr = ['2018年度', '2019年度', '2020年度']
      const arr1 = []
      const arr2 = []
      const arr3 = []
      const nameArr = []
      this.chartData.data.forEach(ele => {
        nameArr.push(ele.name)
        arr1.push(ele.num1)
        arr2.push(ele.num2)
        arr3.push(ele.num3)
      })
      const option = {
        backgroundColor: 'rgb(12,16,61)',
        title: {
          text: this.chartData.name,
          left: '16',
          top: '16',
          textStyle: {
            color: '#fff',
            fontSize: '14',
            fontWeight: 'normal'
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          textStyle: {
            color: '#fff'
          },
          top: '16',
          data: yearArr
        },
        grid: {
          top: '20%',
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            axisLabel: {
              textStyle: {
                color: '#fff'
              }
            },
            boundaryGap: false,
            data: nameArr
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLabel: {
              textStyle: {
                color: '#fff'
              }
            }
          }
        ],
        series: [
          {
            name: '2018年度',
            type: 'line',
            stack: '总量',
            areaStyle: {},
            data: arr1
          },
          {
            name: '2019年度',
            type: 'line',
            stack: '总量',
            areaStyle: {},
            data: arr2
          },
          {
            name: '2020年度',
            type: 'line',
            stack: '总量',
            areaStyle: {},
            data: arr3
          }
        ]
      }

      this.mychart.setOption(option)
    }
  }
}
</script>

<style lang="less" scoped></style>
